{layout name="layout1" /}
<style>
    .layuiadmin-card-list{
        height: 80px;
    }

    .header-font{
        font-size: 20px
    }

    .header-time{
        margin-left: 20px
    }
</style>
<div class="layui-fluid" style="margin-bottom: 100px">
    <div class="layui-card" >
        <div class="layui-card-header">
            <span class="header-font">运营数据</span>
            <span class="header-time">更新时间：{$res.time}</span>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日成交订单（笔）
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$res.order_num_today}</p>
                    <p>昨日：{$res.order_num_yesterday}
                        <span {if condition="$res.order_num_change lt 0" } style="color: #009688" {elseif condition="$res.order_num_change egt 0" } style="color: #dd241e" {/if}>{$res.order_num_change}</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日销售金额（元）
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$res.order_amount_today}</p>

                    <p>昨日:{$res.order_amount_yesterday}
                        <span {if condition="$res.order_amount_change lt 0" } style="color: #009688" {elseif condition="$res.order_amount_change egt 0" } style="color: #dd241e" {/if}>{$res.order_amount_change}</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日新增会员（人）
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$res.add_user_today}</p>
                    <p>昨日:{$res.add_user_yesterday}
                        <span {if condition="$res.add_user_change lt 0" } style="color: #009688" {elseif condition="$res.add_user_change egt 0" } style="color: #dd241e" {/if}>{$res.add_user_change}</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日用户访问量（人）
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$res.today_user_pv}</p>
                    <p>昨日:{$res.yesterday_user_pv}
                        <span {if condition="$res.pv_change lt 0" } style="color: #009688" {elseif condition="$res.pv_change egt 0" } style="color: #dd241e" {/if}>{$res.pv_change}</span></p>
                </div>
            </div>
        </div>

        <div class="layui-col-sm3 ">
            <div class="layui-card">
                <div class="layui-card-header">
                    成交订单总量（笔）
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$res.order_num_all}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
            <div class="layui-card">
                <div class="layui-card-header">
                    销售总额（元）
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$res.order_amount_all}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
            <div class="layui-card">
                <div class="layui-card-header">
                    会员总量（人）
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$res.user_all}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
            <div class="layui-card">
                <div class="layui-card-header">
                    总用户访问量（人）
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$res.total_user_pv}</p>
                </div>
            </div>
        </div>


        <!--快捷功能-->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">快捷功能</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-shortcut">
                        <ul class="layui-row layui-col-space10">
                                <li class="layui-col-xs3">
                                    <a lay-href="{:url('goods/lists')}">
                                        <i class="layui-icon layui-icon-cart-simple"></i>
                                        <cite>商品</cite>
                                    </a>
                                </li>
                                <li class="layui-col-xs3">
                                    <a lay-href="{:url('user/lists')}">
                                        <i class="layui-icon layui-icon-username"></i>
                                        <cite>会员</cite>
                                    </a>
                                </li>
                                <li class="layui-col-xs3">
                                    <a lay-href="{:url('order/lists')}">
                                        <i class="layui-icon layui-icon-form"></i>
                                        <cite>订单</cite>
                                    </a>
                                </li>
                                <li class="layui-col-xs3">
                                    <a lay-href="{:url('coupon/lists')}">
                                        <i class="layui-icon layui-icon-gift"></i>
                                        <cite>优惠券</cite>
                                    </a>
                                </li>
                                <li class="layui-col-xs3">
                                    <a lay-href="{:url('seckill/lists')}">
                                        <i class="layui-icon layui-icon-star"></i>
                                        <cite>限时秒杀</cite>
                                    </a>
                                </li>
                                <li class="layui-col-xs3">
                                    <a lay-href="{:url('distributionMember/index')}">
                                        <i class="layui-icon layui-icon-group"></i>
                                        <cite>分销管理</cite>
                                    </a>
                                </li>
                                <li class="layui-col-xs3">
                                    <a lay-href="{:url('article/lists')}">
                                        <i class="layui-icon layui-icon-file"></i>
                                        <cite>内容管理</cite>
                                    </a>
                                </li>
                            </ul>
                    </div>
                </div>
            </div>
        </div>



        <!--表格-->
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layadmin-dataview" data-anim="fade" lay-filter="sale-amount-change" >
                            <div carousel-item id="sale-amount-change" style="width: 100%;height: 100%">
                                <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layadmin-dataview" data-anim="fade" lay-filter="user-virst-change" >
                            <div carousel-item id="user-virst-change" style="width: 100%;height: 100%;">
                                <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<footer class="info_footer">
    Copyright © 2019-2020 广州好象科技有限公司&nbsp;&nbsp;|&nbsp;&nbsp;LikeShopV2-{$version}
    <br><br>
</footer>
<script>
    layui.config({
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'like','echarts','form','element'], function () {
        var $ = layui.$
            ,like = layui.like
            ,echarts = layui.echarts
            ,element = layui.element;

        like.ajax({
            url: '{:url("index/stat")}',
            type: "post",
            success: function (res) {

                var option_amount = {
                    title: {
                      text: '销售金额'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985',
                            }
                        }
                    },
                    legend: {
                        data: ['销售金额']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            name:'(天)',
                            type: 'category',
                            boundaryGap: false,
                            data: res.data.number
                        }
                    ],
                    yAxis: [
                        {
                            name:'(元)',
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销售金额',
                            type: 'line',

                            areaStyle: {},
                            data: res.data.echarts_order_amount,
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        color: 'rgba(255,182,193,0.5)'
                                    },

                                },
                            }
                        },

                    ]
                };

                var option_member = {
                    title: {
                      text: '用户访问量'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985',
                            }
                        }
                    },
                    legend: {
                        data: ['用户访问量']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            name:'(天)',
                            type: 'category',
                            boundaryGap: false,
                            data: res.data.number
                        }
                    ],
                    yAxis: [
                        {
                            name:'(人)',
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '用户访问量',
                            type: 'line',

                            areaStyle: {},
                            data: res.data.echarts_user_visit,
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        color: 'rgba(255,182,193,0.5)'
                                    },

                                },
                            }
                        },

                    ]
                };

                //准备好dom元素 创建Echart实例
                var chartZhe_amount = echarts.init(document.getElementById('sale-amount-change'));
                chartZhe_amount.setOption(option_amount, true);

                //准备好dom元素 创建Echart实例
                var chartZhe_member = echarts.init(document.getElementById('user-virst-change'));
                chartZhe_member.setOption(option_member, true);
                window.addEventListener('resize', function () {
                    chartZhe.resize();
                    chartZhe_amount.resize();
                    chartZhe_member.resize()
                });
            }
        });

    });
</script>
